<template>
  <div>
    <Card>
      <span slot="title">管理员信息</span>
      <div slot="content">

        <div>管理员ID：{{accInfo.id}}</div>
        <el-divider></el-divider>
        <div>账号：{{accInfo.account}}</div>
        <el-divider></el-divider>
        <div>用户组：{{accInfo.userGroup}}</div>
        <el-divider></el-divider>
        <div>创建时间：{{accInfo.ctime|handleTime}}</div>
        <el-divider></el-divider>
        <div class="set-img">
          更换管理员头像：
          <el-upload class="avatar-uploader" action="http://127.0.0.1:5000/users/avatar_upload" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button type="primary" @click="changeImg">修改头像</el-button>
        </div>
      </div>
    </Card>

  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import storage from "@/utils/storage.js";
import { avatarEdit_api } from "@/api/user.js";
//引入moment插件
import moment from "moment";
export default {
  data() {
    return {
      accInfo: storage.getSession("accInfo"),
      imageUrl: "", //全地址
      aimgUrl: "", //半截地址
    };
  },
  components: {
    Card,
  },
  methods: {
    //上传成功后的钩子函数
    //通过这个函数-->得到响应数据
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.aimgUrl = res.imgUrl;
    },
    //上传前的钩子函数
    beforeAvatarUpload(file) {},
    async changeImg() {
      let res = await avatarEdit_api({ imgUrl: this.aimgUrl });
      if (res.data.code == 0) {
        //组件通信
        //传
        this.$bus.$emit("giveMsg");
      }
    },
  },
  //过滤器

  filters: {
    handleTime(val) {
      //插件moment 处理时间，formate 你想处理的数据格式  hh是12小时制，HH是24小时值
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>

<style lang="less" scoped>
.acc-img {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  vertical-align: middle;
}
.set-img {
  display: flex;
  align-items: center;
}
/deep/.avatar-uploader {
  width: 121px;
  height: 121px;
  margin: 0 20px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
/deep/.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>